<template>
  <a-spin
    class="w-[100%]"
    :size="35"
    :loading="spinLoading"
    tip="正在处理, 请稍候..."
  >
    <a-descriptions :column="2" bordered>
      <a-descriptions-item label="操作名称">
        {{ form.name }}
      </a-descriptions-item>
      <a-descriptions-item label="请求URI">
        {{ form.uri }}
      </a-descriptions-item>
      <a-descriptions-item label="请求方式">
        {{ form.method }}
      </a-descriptions-item>
      <a-descriptions-item label="请求IP">
        {{ form.ip }}
      </a-descriptions-item>
      <a-descriptions-item label="请求时间">
        {{ form.requestTime }}
      </a-descriptions-item>
      <a-descriptions-item label="用户代理">
        {{ form.userAgent }}
      </a-descriptions-item>
      <a-descriptions-item label="请求参数">
        {{ form.params }}
      </a-descriptions-item>
      <a-descriptions-item label="请求时长(ms)">
        {{ form.exceedTime }}
      </a-descriptions-item>
      <a-descriptions-item label="执行结果">
        {{ form.result }}
      </a-descriptions-item>
      <a-descriptions-item label="响应状态">
        <dict-convert
          :dict-data="dicts[proxy.DICT.commonNumberStatus]"
          :dict-key="form.status"
        />
      </a-descriptions-item>
      <a-descriptions-item label="操作人">
        {{ form.creatorName }}
      </a-descriptions-item>
    </a-descriptions>
  </a-spin>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, watch, nextTick } from "vue";
import { getOperatorLogByOperatorLogIdApi } from "~/api/operatorlog.js";

//全局实例
const { proxy } = getCurrentInstance();
//加载字典
const dicts = proxy.LoadDicts([proxy.DICT.commonNumberStatus]);
//加载中...
const spinLoading = ref(false);
//接收父组件参数
const props = defineProps({
  params: {
    type: Object,
    default: () => {},
  },
});
//表单
const form = reactive({
  //操作日志ID
  operatorLogId: null,
  //执行方法名称
  name: null,
  //请求URI
  uri: null,
  //请求方式
  method: 0,
  //请求IP
  ip: null,
  //请求时间
  requestTime: null,
  //用户代理
  userAgent: null,
  //请求参数
  params: null,
  //请求时长(ms)
  exceedTime: null,
  //执行结果
  result: null,
  //响应状态
  status: null,
  //操作人
  creatorName: null,
});
//加载操作日志详细信息
const loadOperatorLogInfo = (operatorLogId) => {
  spinLoading.value = true;
  getOperatorLogByOperatorLogIdApi(operatorLogId)
    .then((res) => {
      //数据赋值
      console.log(res);
      if (res) {
        for (let key in res) {
          if (form.hasOwnProperty(key)) {
            form[key] = res[key];
          }
        }
      }
    })
    .finally(() => {
      spinLoading.value = false;
    });
};
//监听参数变化
watch(
  () => props.params,
  (newVal, oldVal) => {
    //操作日志ID
    if (props.params.operatorLogId) {
      //加载操作日志详情
      loadOperatorLogInfo(props.params.operatorLogId);
    }
  },
  { deep: true, immediate: true }
);
</script>
<style scoped>
/* 树形组件点击会高亮，容易引起歧义，此处取消高亮样式 */
:deep(
    .arco-tree-node-selected .arco-tree-node-title,
    .arco-tree-node-selected .arco-tree-node-title:hover
  ) {
  color: rgb(var(--color-text-1));
}
</style>
